TAD's quick intro to JavaScript &emp; DOM
Introduction
I thought it would be useful to quickly examine JavaScript because it is so similiar to Flash Action-scripting. Besides, if you're serious about developing stuff in Flash sooner or later you will need to look at JavaScript and your web browser. This quick article will look at how to perform many of the useful HTML form-related tasks (such as reading from Dropdown Menus, understand the Document-Object-Model etc...).
What is JavaScript?
It's a 'simple' programming language which is a "Client-Side Script". This means it runs on the person's machine who is viewing your HTML web page. When someone visits your page the script is passed together with the HTML document and then executed inside their browser (Internet Exploder, Nutscrape, Opera etc..).
You place the script in either the <HEAD>...</HEAD> section of the document or inside the <BODY>...</BODY> section.
The script can also be stored as an external file and included as the browser loads the document (but it still is 'stored' in either the HEAD or BODY sections).
<html>
<head>
<script src="MyFunkyFunctions.js">
</script>
</head>
<body>
</body>
<html>
There are 2 ways in which JavaScript code is executed by the document, either as the page loads (and the browser hits some <SCRIPT>...</SCRIPT> tags) or as the result of an event (such as moving the mouse over a hyper-link, clicking, typing some text, a timed-event etc..).
Most JavaScript is written and stored inside the <HEAD>...</HEAD> section of a document as a series of Functions.
Getting started
Simply cut and paste the following HTML code into your favourite text editor and save it as "HelloWorld.htm".
<html>
<body>
<script>
document.write("Hello world!");
</script>
</body>
</html>
Running the "HelloWorld.htm" file in your web browser should bring up the normal "Hello world!" message. As soon as the script is encountered it executes and writes the string "Hello World!" into itself (the document).
Events
Let's create a simple function and attach it to the "onLoad( )" event of the document. This will brings up an alert box when the document has loaded.
<html>
<head>
<script>
function Loaded() {
alert ("yep, doc has loaded");
}
</script>
</head>
<body onLoad="Loaded();">
A simple example of the onLoad event.
</body>
</html>
DOM (Document Object Model)?
Like any other Object-Orientated task a web browser breaks everything down into small objects and this includes a loaded HTML document. The DOM describes how these small objects are placed inside a tree structure. It tells us how to access a certain part of the document by means of an object path. It's just a fancy name for storing data (and their methods) in a folder/sub-folder way just like the directories on your PC.
We have already seen the DOM in action in the previous "Hello World!" example. There is an object called 'document'. This stores all information about (surprise, surprise) the HTML document #:o) One of its most useful functions is the .write( ) method. This allows us to insert Text or any HTML tags/code we want. One use for this could be to generate a dynamic calendar and display as plain old HTML.
If you want to access the FORM objects and its form-fields then you will need to learn the DOM and step down 3 or 4 levels of sub-objects.
A text field
Let's start on the simple stuff first. So we need a form with a text field and a button. We'll add an onClick( ) event to the button so we can trigger off our function whenever we want.
<html>
<head>
<script>
function dostuff() {
var msg = document.form1.input1.value;
alert (msg);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="input1"><br>
<input type="button" name="Button" value="Button" onClick="dostuff();">
</form>
</body>
</html>
All the above is doing is reading from our textfield called 'input1' and displaying its value using an Alert box.
The document object stores all of the forms as objects too and each form stores its fields as objects. Each field has its own properties and methods. In the case of our textfield one property called 'value' stores the actual input string.
The general purpose format to access an textfield object's string value is
like this:
document.<formName>.<fieldName>.<value>
You can assign your own, more meaning names by changing the NAME="...." tags inside your HTML document.
Debugging your code
Here is one useful piece of code. Give the function an object and it will display all of the properties inside that object. This is sometimes the only real way to figure out what has gone wrong or to find what hidden properties a mystery object has got.
function dump(theObj) {
var tx="<table width='100'>";
var props = new Array();
for (var i in theObj) { props.push(i); }
props.sort();
for (var i=0; i<props.length; i++) {
tx+= "<tr><td>"+props[i]+"</td><td>"+theObj[props[i]]+"</td></tr>";
}
tx+="</table>"
document.write(tx);
}
Then pass it some mystery object like this:
dump(document);
Of course it zaps the current document, but thats a small price to pay for debug information :)
Checkboxes
Next on the list is the CheckBox. This is similiar to the textfield but has an extra property called '.checked' which is a true/false flag. To read it we just test the 'checked' property and return the .value property if true or "" if false.
function getCheckValue(theObj) {
if (theObj.checked) {
return theObj.value;
} else {
return "";
}
}
To use the above function we simply pass it a checkbox object, like this:
chkvalue = getCheckValue( document.form1.checkbox1 );
alert (chkvalue);
Of course you can make the function much shorter by using the '?' construct.
function getCheckValue(theObj) {
return (theObj.checked)? theObj.value: "";
}
Radio buttons
These are interesting because we don't have a single object (like we did with the Textfield and Checkbox objects). Instead we have an array of radiobuttons which ALL share the same NAME= tag attribute. In order to read a radiobutton group we must look through the array and find which 1 is checked and return its value. Also if NO radiobutton is selected then we simply return "".
function getRadioValue(theObj) {
for (var i=0; i<theObj.length; i++) {
if (theObj[i].checked) { return theObj[i].value;}
}
return "";
}
To use the function we do this:
radvalue = getRadioValue( document.form1.radio1 );
alert (radvalue);
Dropdown menus
This type of form object contains a .selectedIndex property (which stores -1 or the index of the selected item in the menu). It also contains an array of .options objects. Each option object describes one of the dropdown menu, er, options :) Here is the code to read the currently selected option in a menu or return "" if none is selected.
function getMenuValue(theObj) {
if (theObj.selectedIndex<0) {
return "";
} else {
return theObj.options[theObj.selectedIndex].value;
}
}
The code (like previous examples) is easy to use:
menuvalue = getMenuValue( document.form1.menu1 );
alert (menuvalue);
Closing words
That was certainly a quick look at JavaScript and DOM. I hope someone found it useful. You should find some examples in the Hugi bonus .ZIP file.
Happy Scriptin'